<script setup>
import { useSlots } from "@vue/runtime-core";
import { directive as vClickOutside } from 'v-click-outside'

const slots = useSlots();

defineProps({
  label: String,
  overflowHidden: {
    type: Boolean,
    default: false,
  }
});


</script>

<template>
  <div class="panel">
    <header v-if="slots['toolbar']" class="flex between">
      <span class="title">{{ label }}</span>
      <div class="inline" style="margin-right:16px">
        <slot name="toolbar"></slot>
      </div>
    </header>
    <header v-else>
      {{ label }}
    </header>
    <div class="panel-body" :class="{ 'overflow-hidden': overflowHidden }">
      <slot></slot>
    </div>
  </div>
</template>

<style lang="scss" scoped>
div.panel {

  .title {
    font-size: 1.14em;
    color: rgba(34, 34, 34, 0.8);
  }

  min-height: 300px;
  width: calc(33% - 20px);
  border: 1px solid #f3f3f3;
  margin: 10px;
  background: white;
  border-radius: 6px;

  header {
    background-color: white;
    color: #2e2e2e;
    line-height: 56px;
    align-content: center;
    flex-wrap: wrap;
  }

  .panel-body {
    width: auto;
    height: calc(100% - 56px);
    display: flex;
    flex-direction: column;
    overflow-y: scroll;
    overflow-x: hidden;

    &.overflow-hidden {
      overflow-y: hidden;
    }
  }
}
</style>